<template>
    <div class="home" id="home" name="home">
        <div class="main-box">
            <div class="main">
                <!-- 场馆资源展示区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">场馆</div>
                    </div>
                    <div class="box-bd">
                        <div class="list">
                            <MyList :list="GymList" :isMore="true"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 场馆资源展示区域END -->

                <!-- 人力资源展示区域 -->
                <div class="appliance" id="promo-menu">
                    <div class="box-hd">
                        <div class="title">人力</div>
                        <div class="more" id="more">
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="list">
                            <MyList :list="peopleList" :isMore="true"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 人力资源展示区域END -->

                <!-- 物品资源展示区域 -->
                <div class="accessory" id="promo-menu">
                    <div class="box-hd">
                        <div class="title">物品</div>
                        <div class="more" id="more">
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="list">
                            <MyList :list="GoodList" :isMore="true"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 物品资源展示区域END -->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

                GymList: "", // 场馆
                GoodList: "", // 物品
                peopleList: "", // 人力


            };
        },
        watch: {

        },
        created() {

            // 获取各类商品数据
            this.getPromo("场馆预订", "GymList");
            this.getPromo("物品出租", "GoodList");
            this.getPromo("人力资源出租", "peopleList");


        },
        methods: {

            // 获取各类商品数据方法封装
            getPromo(categoryName, val, api) {
                api = api != undefined ? api : "/api/product/getPromoProduct";
                this.$axios
                    .post(api, {
                        categoryName
                    })
                    .then(res => {
                        this[val] = res.data.Product;
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            }
        }
    };
</script>

<style scoped>
    @import "../assets/css/index.css";
</style>